<template>
  <div class="file-browser">
    <h4 class="file-total">查看文件 共{{myFiles.length}}个</h4>
    <div class="swiper-outter">
      <swiper :options="swiperOption" ref="swiper">
        <template v-for="item in myFiles">
          <swiper-slide v-if="isImage(item.address)">
            <div class="audit-label" @click="onAuditLabel(item.status,item.remark)" v-if="type!=='contract'">{{item.status | audit}}</div>
            <a target="_blank" :href="item.address" class="slider slider-image" :style="{backgroundImage: 'url('+item.address+')'}" :download="item.name">
            </a>
          </swiper-slide>
          <swiper-slide v-else>
            <div class="audit-label" @click="onAuditLabel(item.status,item.remark)" v-if="type!=='contract'">{{item.status | audit}}</div>
            <a target="_blank " :href="item.address " class="slider slider-file" :download="item.name">
              <i class="iconfont icon-wenjian"></i><br/>
              <span>{{item.name}}</span>
            </a>
          </swiper-slide>
        </template>
      </swiper>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </div>
    <div class="files-btn-box">
      <a class="blue-button" target="_blank" :href="currentdHref" :download="currentName" v-if="type==='browser'||type==='contract'">下载</a>
      <template v-if="type==='audit'&&currentFile&&currentFile.status===0">
        <button type="button" class="blue-button" @click="onAuditPass">审核通过</button>
        <button type="button" class="blue-button" @click="auditShow=true,remark=''">审核不通过</button>
      </template>
    </div>
    <vodal :show="auditShow" animation="zoom" :width="380" :height="283" @hide="auditShow = false">
      <div class="vodal-main vodal-xxbox">
        <h4>审核未通过</h4>
        <textarea class="refuse-reason" v-model="remark" placeholder="未通过原因"></textarea>
        <div class="tc auto vodal-btn-box">
          <button class="blue-button" @click="onAuditRefuse">确认</button>
          <button class="blue-button" @click="auditShow=false">取消</button>
        </div>
      </div>
    </vodal>
    <vodal :show="audtiResultShow" animation="zoom" :width="380" :height="283" @hide="audtiResultShow = false">
      <div class="vodal-main vodal-xxbox">
        <h4>审核未通过</h4>
        <p class="audit-result">{{remark}}</p>
        <div class="tc auto vodal-btn-box">
          <button class="blue-button" @click="audtiResultShow = false">确认</button>
        </div>
      </div>
    </vodal>
  </div>
</template>
<script type="text/javascript ">
import {
  swiper,
  swiperSlide
} from 'vue-awesome-swiper'
export default {
  components: {
    swiper,
    swiperSlide
  },
  props: {
    files: Array, //status表示审核状态 0 待审核 1已通过 -1不通过 remark 不通过的备注
    type: String // 表示是普通查看还是审核  audit browser contract,
  },
  data() {
    return {
      myFiles: this.files,
      index: 0,
      remark: '',
      audtiResultShow: false,
      auditShow: false,
      swiperOption: {
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        onSlideChangeEnd: (swiper) => {
          this.index = swiper.realIndex
        }
      }
    }
  },
  computed: {
    currentdHref() {
      let file = this.myFiles[this.index]
      if (file) {
        return file.address
      } else {
        return ''
      }
    },
    currentName() {
      let file = this.myFiles[this.index]
      if (file) {
        return file.name
      } else {
        return ''
      }
    },
    currentFile() {
      let file = this.myFiles[this.index]
      if (file) {
        return file
      } else {
        return null
      }
    }
  },
  watch: {
    'files': function() {
      this.myFiles = this.files
    }
  },
  mounted() {},
  methods: {
    onAuditPass() {
      if (this.currentFile) {
        this.$http.post('/legalService/monitor/examineFile', {
          id: this.currentFile.id,
          status: 1
        }).then(data => {
          if (data.data.httpCode === 200) {
            this.currentFile.status = 1
          } else {
            this.$toasted.show(data.data.msg)
          }
        }).catch(err => {
          console.log(err)
          this.$toasted.show('网络出错')
        })
      }
    },
    onAuditRefuse() {
      if (!this.remark) {
        this.$toasted.show('请填写理由')
        return
      }
      this.auditShow = false
      this.$http.post('/legalService/monitor/examineFile', {
        id: this.currentFile.id,
        status: -1,
        remark: this.remark
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.currentFile.status = -1
          this.currentFile.remark = this.remark
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    },
    onAuditLabel(status, remark) {
      if (status === -1) {
        this.remark = remark
        this.audtiResultShow = true
      }
    },
    update() {
      this.$refs.swiper.swiper.update(true)
    },
    isImage(name) {
      let imageArr = ['jpg', 'gif', 'png', 'jpeg']
      let tempArr = name.split('.')
      let suffix = tempArr[tempArr.length - 1]
      if (imageArr.indexOf(suffix) === -1) {
        return false
      } else {
        return true
      }
    }
  },
  filters: {
    audit(v) {
      if (v === 0) {
        return '未审核'
      }
      if (v === 1) {
        return '已通过审核'
      }
      if (v === -1) {
        return '未通过审核(点击查看详情)'
      }
    }
  }
}

</script>
<style type="text/css " scoped>
.file-total {
  background-color: #d8e7ff;
  font-size: 14px;
  font-weight: bold;
  line-height: 40px;
  text-indent: 30px;
}

.file-browser {}

.file-browser .slider {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 310px;
  margin: 30px 0;
}

.file-browser .slider-image {
  background: center no-repeat;
  background-size: contain;
}

.file-browser .slider-file {
  text-align: center;
}

.file-browser .slider-file i {
  display: inline-block;
  margin-top: 100px;
  font-size: 70px;
  color: #d8e7ff;
}

.file-browser .slider-file span {
  display: inline-block;
  margin-top: 50px;
  font-size: 20px;
}

.swiper-outter {
  width: 88%;
  height: 340px;
  margin: 28px auto;
}

.file-browser .swiper-button-next {
  right: 5px;
}

.file-browser .swiper-button-prev {
  left: 5px;
}

.files-btn-box {
  text-align: center;
}

.files-btn-box .blue-button {
  width: 100px;
  height: 30px;
  line-height: 30px;
  margin: 0 5px;
  cursor: pointer;
}

.audit-label {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #d8e7ff;
  color: #000;
  padding: 5px 10px;
  cursor: pointer;
}

.audit-result {
  padding: 30px;
  height: 200px;
  overflow-y: auto;
}

.refuse-reason {
  width: 320px;
  height: 150px;
  margin: 20px 30px;
}

</style>
